<template>
  <div class="app-container no-bg">
    <el-card shadow="hover" style="margin-bottom: 20px">
      <div class="welcome-box">
        <el-avatar :size="60" :src="userStore.avatar" />
        <div class="welcome-text">
          <span class="time">{{ parseTime(currentTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          <span>欢迎您，{{ userStore.nickName }}，开始您一天的工作吧！</span>
        </div>
      </div>
    </el-card>
    <el-row :gutter="20">
      <el-col :sm="12" :lg="6">
        <el-card body-class="data-box" shadow="hover">
          <div class="data-label">用户量</div>
          <el-statistic :value="outputValue" />
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="6">
        <el-card body-class="data-box" shadow="hover">
          <div class="data-label">访问量</div>
          <el-statistic :value="outputValue" />
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="6">
        <el-card body-class="data-box" shadow="hover">
          <div class="data-label">下载量</div>
          <el-statistic :value="outputValue" />
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="6">
        <el-card body-class="data-box" shadow="hover">
          <div class="data-label">使用量</div>
          <el-statistic :value="outputValue" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { useTransition } from '@vueuse/core'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1500
})
source.value = 2000

let currentTime = ref(new Date())
const timeInterval = setInterval(() => {
  currentTime.value = new Date()
}, 1000)

onUnmounted(() => {
  clearInterval(timeInterval)
})

</script>

<style scoped lang="scss">
.app-container {
  .welcome-box{
    display: flex;
    align-items: center;
    gap: 20px;
    .welcome-text{
      display: flex;
      flex-direction: column;
      gap: 4px;
      .time{
        font-size: var(--el-font-size-small);
        color: var(--el-color-info);
      }
    }
  }
  .data-box{
    .data-label{
      margin-bottom: 16px;
      font-size: 20rpx;
      font-weight: 600;
    }
  }
}
</style>

